{% extends 'main.html' %}

{% block content %}

<main class="profile-page layout layout--2">

  <div class="container">

    <!-- Room Start -->
    <div class="room">

      <div class="room__top">

        <div class="room__topLeft">
          <a href={% url 'home' %}>
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
              <title>arrow-left</title>
              <path
                d="M13.723 2.286l-13.723 13.714 13.719 13.714 1.616-1.611-10.96-10.96h27.625v-2.286h-27.625l10.965-10.965-1.616-1.607z"
              ></path>
            </svg>
          </a>
          <h3>学习室</h3>
        </div>

        {% if request.user == room_pk.host %}
        <div class="room__topRight">

          <a href="{% url 'update-room' room_pk.id %}">
            <svg
              enable-background="new 0 0 24 24"
              height="32"
              viewBox="0 0 24 24"
              width="32"
              xmlns="http://www.w3.org/2000/svg"
            >
              <title>编辑/更新房间</title>
              <g>
                <path d="m23.5 22h-15c-.276 0-.5-.224-.5-.5s.224-.5.5-.5h15c.276 0 .5.224.5.5s-.224.5-.5.5z" />
              </g>
              <g>
                <g>
                  <path
                    d="m2.5 22c-.131 0-.259-.052-.354-.146-.123-.123-.173-.3-.133-.468l1.09-4.625c.021-.09.067-.173.133-.239l14.143-14.143c.565-.566 1.554-.566 2.121 0l2.121 2.121c.283.283.439.66.439 1.061s-.156.778-.439 1.061l-14.142 14.141c-.065.066-.148.112-.239.133l-4.625 1.09c-.038.01-.077.014-.115.014zm1.544-4.873-.872 3.7 3.7-.872 14.042-14.041c.095-.095.146-.22.146-.354 0-.133-.052-.259-.146-.354l-2.121-2.121c-.19-.189-.518-.189-.707 0zm3.081 3.283h.01z"
                  />
                </g>
                <g>
                  <path
                    d="m17.889 10.146c-.128 0-.256-.049-.354-.146l-3.535-3.536c-.195-.195-.195-.512 0-.707s.512-.195.707 0l3.536 3.536c.195.195.195.512 0 .707-.098.098-.226.146-.354.146z"
                  />
                </g>
              </g>
            </svg>
          </a>


          <a href="{% url 'delete-room' room_pk.id %}">
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
              <title>删除房间</title>
              <path
                d="M27.314 6.019l-1.333-1.333-9.98 9.981-9.981-9.981-1.333 1.333 9.981 9.981-9.981 9.98 1.333 1.333 9.981-9.98 9.98 9.98 1.333-1.333-9.98-9.98 9.98-9.981z"
              ></path>
            </svg>
          </a>

        </div>
        {% endif %}


      </div>

      <div class="room__box scroll">

        {# 房间主体 start #}
        <div class="room__header scroll">

          <div class="room__info">
            <h3>{{ room_pk.name }}</h3>
            <span>{{ room_pk.created|timesince }}</span>
          </div>

          <div class="room__hosted">

            <p>创建者</p>
            <a href="{% url 'user-profile' room_pk.host.id %}" class="room__author">
              <div class="avatar avatar--small">

                <img src="{{ room_pk.host.avatar.url }}" />

              </div>
              <span>@{{ room_pk.host.username }}</span>
            </a>

          </div>

          <div class="room__details">
              {{ room_pk.desc }}
          </div>

          <span class="room__topics">{{ room_pk.topic }}</span>

        </div>
        {# 房间主体 end #}


        {# 房间消息 start #}
        <div class="room__conversation">
          <div class="threads scroll">

            {% for message in room_message %}

                <div class="thread">

                  <div class="thread__top">

                    <div class="thread__author">
                      <a href="{% url 'user-profile' message.user.id %}" class="thread__authorInfo">
                        <div class="avatar avatar--small">
                          <img src="{{ message.user.avatar.url }}" />
                        </div>
                        <span>@{{ message.user.username }}</span>
                      </a>
                      <span class="thread__date">{{ message.created|timesince }}前...</span>
                    </div>


                    {% if request.user == message.user %}
                    <a href="{% url 'delete-message' message.id %}">
                    <div class="thread__delete">

                      <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
                        <title>删除聊天消息</title>
                        <path
                          d="M27.314 6.019l-1.333-1.333-9.98 9.981-9.981-9.981-1.333 1.333 9.981 9.981-9.981 9.98 1.333 1.333 9.981-9.98 9.98 9.98 1.333-1.333-9.98-9.98 9.98-9.981z"
                        ></path>
                      </svg>

                    </div>
                    </a>
                    {% endif %}



                  </div>

                  <div class="thread__details">
                      {{ message.body }}
                  </div>

                </div>

            {% endfor %}

          </div>
        </div>
        {# 房间消息 end #}

      </div>

      {# 输入框 发送消息 start #}
      <div class="room__message">

        <form method="POST" action="#">
            {% csrf_token %}
            <input type="text" name="body" placeholder="发送你的想法...">
        </form>

      </div>
      {# 输入框 发送消息 end #}

    </div>
    <!-- Room End -->


    <!--参与者   Start -->
    <div class="participants">

      <h3 class="participants__top">参与者 <span>({{ room_pk.participants.count }} 人加入房间)</span></h3>

      <div class="participants__list scroll">

        {% for user in participants %}

        <a href="{% url 'user-profile' user.id %}" class="participant">

          <div class="avatar avatar--medium">

            <img src="{{ user.avatar.url }}" />

          </div>

          <p>{{ user.username }}<span>@{{ user.username }}</span></p>

        </a>

        {% endfor %}

      </div>

    </div>
    <!--参与者  End -->

  </div>

</main>




{% endblock %}












{#{% extends 'main.html' %}#}

{#{% block content %}#}
{#<style>#}
{#    .room-container{#}
{#        display: grid; {# 采用网格布局 #}
{#        grid-template-columns: 3fr 1fr; {# 前者是后者的3倍 #}
{#    }#}
{#</style>#}

<div class="room-container">
    <div>
        {# 房间主体 start #}
{#        <h1>{{ room_pk.name }}</h1>#}
{##}
{#        <p>{{ room_pk.desc }}</p>#}
        <div class="comment-wrapper">
            <h3>对话</h3>
            <hr/>

            {% for message in room_message %}
            <div>
                {% if request.user == message.user %}
                <a href="{% url 'delete-message' message.id%}">删除</a>
                {% endif %}

                <small>@{{ message.user }} {{ message.created|timesince }}前...</small>
                <p>{{ message.body }}</p>
                <hr>
            </div>
            {% endfor %}

        </div>
        {# 房间主体 end #}

        {# 发消息框表单 start #}
        <div class="comment-form">
            <form method="POST" action="">
                {% csrf_token %}
                <input type="text" name="body" placeholder="发送你的想法...">

            </form>
        </div>
        {# 发消息框表单 end #}
    </div>

    {# 参与者 end #}
    <div class="partcipators-container">
    <h3>参与者</h3>
    <hr>

    {% for user in participants %}
        <div>
            <p>@{{ user.username }}</p>
        </div>
    {% endfor %}
    </div>
    {# 参与者 end #}
</div>



{#{% endblock %}#}
